import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class LeftTop extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }


    componentDidMount () {
        this.onsave() 
    }
    onsave = () => {
     
        request({
            url: `/zhrq-web/cockpit/common/getGpData`,
            method: 'GET',
           
        }).then(data => {
            // console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList
        return {
            // backgroundColor: '#011c3a',
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            xAxis: {
                data: data.timeList,
                axisLine: {
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                top:'26%',
                left: '7%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                splitNumber:4,
                min:0,
                max:200,
                name: "钢瓶库存（个）",
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                axisLine: {
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
               
        
            },
            series: [{
                type: 'bar',
                barWidth: 18,
                name:"库存",
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0.3,
                            color: '#70D7FF'
                        }, {
                            offset: 1,
                            color: '#122742'
                        }], false)
                    }
                },
                data: data.valueList
            }]
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"80%"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default LeftTop;
